<template>
    <div class="TrendInfo_Root">
        <div class="TrendInfo_Info">
            <div class="TrendInfo_title">{{ title }}</div>
            <div class="TrendInfo_cont">
                {{ content }}
            </div>
        </div>
        <div class="TrendInfo_Img">
            <!-- 出问题可以用回这个 -->
            <!-- <el-image  
                :src="posterDefault" 
                :zoom-rate="1.2" 
                :max-scale="7" 
                :min-scale="0.2"
                :preview-src-list="posterDefault"
                :initial-index="0"
                fit="cover"
                lazy
                >
                <template #error>
                    <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                    </div>
                </template>
</el-image> -->
            <ImagePreviewer :imageUrl="posterDefault"></ImagePreviewer>
        </div>
        <div class="TrendInfo_Author">
            <span class="author_info">作者:
                <span class="author_info">{{ author }}</span>
            </span>
            <span class="author_info">发布日期:
                <span class="author_info">{{ date }}</span>
            </span>
        </div>
        <div class="TrendInfo_Handle">
            <el-link type="primary" @click="Delete()">
                <slot>删除动态</slot>
            </el-link>
            <!-- <el-link type="danger" @click="Reject()">稿件驳回</el-link> -->
        </div>
    </div>
</template>

<script setup>
import { computed, toRefs } from 'vue'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import devURL from '../Config/NetBaseConfig.js'
import ImagePreviewer from './ImagePreviewer.vue';

let props = defineProps({
    id: {
        type: String,
        required: true,
    },
    title: '',
    content: '',
    img: '',
    author: '',
    date: ''
})

let emits = defineEmits(['DeleteTrend'])

let data = computed(() => {
    return toRefs(props)
})

let posterDefault = computed(() => {
    // if (data.value.img.value === "" || data.value.img.value === null) {
    //     return new URL("../assets/Image/temp.png", import.meta.url).pathname
    // }
    return props.img
})

const Delete = () => {
    emits('DeleteTrend', data.value.id.value)
}



</script>

<style lang='less' scoped>
.TrendInfo_Root {
    width: 98%;
    height: 20vh;
    border: 1px solid #ccc;
    border-radius: 1rem;
    box-shadow: 0.1rem 0 0.15rem 0.15rem rgba(204, 204, 204, .3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 1rem 1px 1rem;
    transition: all .5s ease;

    &:hover {
        transform: translate(-0.15rem, -0.15rem);
        box-shadow: 0.2rem 0.2rem 0.3rem 0.3rem rgba(204, 204, 204, .3);
    }

    .TrendInfo_Info {
        display: flex;
        width: 35vw;
        height: 100%;
        padding-top: 0.5rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
        flex-wrap: wrap;

        .TrendInfo_title {
            font-size: 1.1rem;
        }

        .TrendInfo_cont {
            margin-top: 1rem;
            font-size: 0.8rem;
            width: 100%;
            word-wrap: break-word;
        }
    }

    .TrendInfo_Img {
        height: 100%;
        width: 15vw;
        display: flex;
        justify-content: center;
        align-items: center;
        //border: 1px solid #ccc;
        margin: 0 0.1rem 0 0.1rem;

        .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-color: #ccc;
        }
    }

    .TrendInfo_Author {
        display: flex;
        height: 100%;
        width: 10vw;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: start;
        flex-wrap: wrap;

        .author_info {
            font-size: 16px;
            color: #ccc;
            margin-right: 0.5rem;
            word-wrap: break-word;
        }
    }

    .TrendInfo_Handle {
        display: flex;
        height: 100%;
        width: 10vw;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
}
</style>